/**
 * Created by luchengdong on 2017/8/30.
 */
$(window).on('load', function () {
    waterFall()

    $(window).on('scroll', function () {
        if (cheakWillLoad()) {
            var data = {'dataImg': [{'img': '28.jpg'}, {'img': '27.jpg'}, {'img': '26.jpg'}, {'img': '25.jpg'}, {'img': '24.jpg'}, {'img': '23.jpg'}, {'img': '22.jpg'}, {'img': '21.jpg'}, {'img': '11.jpg'}, {'img': '12.jpg'}, {'img': '13.jpg'}, {'img': '14.jpg'}, {'img': '15.jpg'}, ]}

            $.each(data.dataImg, function (index, value) {
                var image_name = $(value).attr('img');

                var border_view = $('<div>').addClass('border_view').appendTo($('#back'));

                var imageView = $('<div>').addClass('imageView').appendTo($(border_view));

                $('<img>').attr({src: 'imgs/' + image_name}).appendTo($(imageView));
            })

            waterFall('back', 'border_view');
        }
    })
})

function waterFall() {
    // 拿到所有盒子
    var border_view_list = $('#back>.border_view')
    // 拿到一个盒子的宽度
    var border_view_width = $(border_view_list).eq(0).outerWidth();

    // 获取屏幕宽度
    var screen_width = $(window).width();
    // 计算列数
    var columns = Math.floor(screen_width / border_view_width);

    // 遍历所有标签
    var height_list = [];
    $.each(border_view_list, function (index, value) {

        var border_view_height = $(value).outerHeight();
        if (index < columns) {
            height_list[index] = border_view_height;
            console.log(index, border_view_height);
        } else {
            // 取出最低的高度和对应下标
            var min_height = Math.min.apply(this, height_list);
            var min_index = $.inArray(min_height, height_list);

            console.log('最低高度', min_height, min_index);

            // 定位对应位置
            $(value).css({
                'position': 'absolute',
                'top': min_height + 'px',
                'left': border_view_width * min_index + 'px',
            });

            height_list[min_index] = height_list[min_index] + border_view_height;
            // console.log(index, border_view_height);
        }
    })
}

function cheakWillLoad() {
    // 取出所有的border_view
    var border_view_list = $('#back>.border_view');

    // 取出最后一个border_view
    var last_border_view = $(border_view_list).eq(border_view_list.length - 1);

    // 求出最后一个盒子高度的一般 + 头部偏离值
    var last_border_view_dis = $(last_border_view).outerHeight() * 0.5 + $(last_border_view).offset().top;

    // 求出浏览器的高度 标准模式和混杂模式
    var screen_height = $(window).height();

    // 页面偏离屏幕的高度
    var scroll_top_height = $(window).scrollTop();

    console.log(last_border_view_dis, screen_height, scroll_top_height)

    return last_border_view_dis <= screen_height + scroll_top_height;
}